<?php
/**
 * @var $arr_products array
 */

use app\common\helper\CommonHelper;
use app\common\service\Tpl;

$tpl_obj = new Tpl();

$group = CommonHelper::makeGroup($arr_products, 2);
?>
<!DOCTYPE html>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="und">
<head>
    <meta http-equiv="Content-Security-Policy"
          content="script-src 'none'; connect-src 'none'; object-src 'none'; form-action https://cdn.ampproject.org https://amp.stripo.email;">
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta name="x-apple-disable-message-reformatting">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="telephone=no" name="format-detection">
    <title>Products</title><!--[if (mso 16)]>
    <style type="text/css">
        a {
            text-decoration: none;
        }
    </style>
    <![endif]--><!--[if gte mso 9]>
    <style>sup {
        font-size: 100% !important;
    }</style><![endif]--><!--[if gte mso 9]>
    <xml>
        <o:OfficeDocumentSettings>
            <o:AllowPNG></o:AllowPNG>
            <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
    <!--[if !mso]>
    <link href="https://fonts.googleapis.com/css2?family=Marcellus&amp;display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Raleway&amp;display=swap" rel="stylesheet"><!--<![endif]-->
    <style type="text/css">
        .rollover:hover .rollover-first {
            max-height: 0px !important;
            display: none !important;
        }

        .rollover:hover .rollover-second {
            max-height: none !important;
            display: block !important;
        }

        .rollover span {
            font-size: 0px;
        }

        u + .body img ~ div div {
            display: none;
        }

        #outlook a {
            padding: 0;
        }

        span.MsoHyperlink,
        span.MsoHyperlinkFollowed {
            color: inherit;
            mso-style-priority: 99;
        }

        a.es-button {
            mso-style-priority: 100 !important;
            text-decoration: none !important;
        }

        a[x-apple-data-detectors] {
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
        }

        .es-desk-hidden {
            display: none;
            float: left;
            overflow: hidden;
            width: 0;
            max-height: 0;
            line-height: 0;
            mso-hide: all;
        }

        .es-button-border:hover > a.es-button {
            color: #ffffff !important;
        }

        @media only screen and (max-width: 600px) {
            h1 {
                font-size: 48px !important;
                text-align: center
            }

            h2 {
                font-size: 30px !important;
                text-align: center
            }

            h3 {
                font-size: 20px !important;
                text-align: center
            }

            .es-m-p0r {
                padding-right: 0px !important
            }

            .es-m-p20t {
                padding-top: 20px !important
            }

            .es-m-p20b {
                padding-bottom: 20px !important
            }

            *[class="gmail-fix"] {
                display: none !important
            }

            p, a {
                line-height: 150% !important
            }

            h1, h1 a {
                line-height: 120% !important
            }

            h2, h2 a {
                line-height: 120% !important
            }

            h3, h3 a {
                line-height: 120% !important
            }

            h4, h4 a {
                line-height: 120% !important
            }

            h5, h5 a {
                line-height: 120% !important
            }

            h6, h6 a {
                line-height: 120% !important
            }

            h4 {
                font-size: 24px !important;
                text-align: left
            }

            h5 {
                font-size: 20px !important;
                text-align: left
            }

            h6 {
                font-size: 16px !important;
                text-align: left
            }

            .es-header-body h1 a, .es-content-body h1 a, .es-footer-body h1 a {
                font-size: 48px !important
            }

            .es-header-body h2 a, .es-content-body h2 a, .es-footer-body h2 a {
                font-size: 30px !important
            }

            .es-header-body h3 a, .es-content-body h3 a, .es-footer-body h3 a {
                font-size: 20px !important
            }

            .es-header-body h4 a, .es-content-body h4 a, .es-footer-body h4 a {
                font-size: 24px !important
            }

            .es-header-body h5 a, .es-content-body h5 a, .es-footer-body h5 a {
                font-size: 20px !important
            }

            .es-header-body h6 a, .es-content-body h6 a, .es-footer-body h6 a {
                font-size: 16px !important
            }

            .es-menu td a {
                font-size: 12px !important
            }

            .es-header-body p, .es-header-body a {
                font-size: 16px !important
            }

            .es-content-body p, .es-content-body a {
                font-size: 16px !important
            }

            .es-footer-body p, .es-footer-body a {
                font-size: 12px !important
            }

            .es-infoblock p, .es-infoblock a {
                font-size: 12px !important
            }

            .es-m-txt-c, .es-m-txt-c h1, .es-m-txt-c h2, .es-m-txt-c h3, .es-m-txt-c h4, .es-m-txt-c h5, .es-m-txt-c h6 {
                text-align: center !important
            }

            .es-m-txt-r, .es-m-txt-r h1, .es-m-txt-r h2, .es-m-txt-r h3, .es-m-txt-r h4, .es-m-txt-r h5, .es-m-txt-r h6 {
                text-align: right !important
            }

            .es-m-txt-j, .es-m-txt-j h1, .es-m-txt-j h2, .es-m-txt-j h3, .es-m-txt-j h4, .es-m-txt-j h5, .es-m-txt-j h6 {
                text-align: justify !important
            }

            .es-m-txt-l, .es-m-txt-l h1, .es-m-txt-l h2, .es-m-txt-l h3, .es-m-txt-l h4, .es-m-txt-l h5, .es-m-txt-l h6 {
                text-align: left !important
            }

            .es-m-txt-r img, .es-m-txt-c img, .es-m-txt-l img {
                display: inline !important
            }

            .es-m-txt-r .rollover:hover .rollover-second, .es-m-txt-c .rollover:hover .rollover-second, .es-m-txt-l .rollover:hover .rollover-second {
                display: inline !important
            }

            .es-m-txt-r .rollover span, .es-m-txt-c .rollover span, .es-m-txt-l .rollover span {
                line-height: 0 !important;
                font-size: 0 !important
            }

            .es-spacer {
                display: inline-table
            }

            a.es-button, button.es-button {
                font-size: 20px !important;
                line-height: 120% !important
            }

            a.es-button, button.es-button, .es-button-border {
                display: inline-block !important
            }

            .es-m-fw, .es-m-fw.es-fw, .es-m-fw .es-button {
                display: block !important
            }

            .es-m-il, .es-m-il .es-button, .es-social, .es-social td, .es-menu {
                display: inline-block !important
            }

            .es-adaptive table, .es-left, .es-right {
                width: 100% !important
            }

            .es-content table, .es-header table, .es-footer table, .es-content, .es-footer, .es-header {
                width: 100% !important;
                max-width: 600px !important
            }

            .adapt-img {
                width: 100% !important;
                height: auto !important
            }

            .es-mobile-hidden, .es-hidden {
                display: none !important
            }

            .es-desk-hidden {
                width: auto !important;
                overflow: visible !important;
                float: none !important;
                max-height: inherit !important;
                line-height: inherit !important;
                display: table-row !important
            }

            tr.es-desk-hidden {
                display: table-row !important
            }

            table.es-desk-hidden {
                display: table !important
            }

            td.es-desk-menu-hidden {
                display: table-cell !important
            }

            .es-menu td {
                width: 1% !important
            }

            table.es-table-not-adapt, .esd-block-html table {
                width: auto !important
            }

            .es-social td {
                padding-bottom: 10px
            }

            .h-auto {
                height: auto !important
            }
        }

        @media screen and (max-width: 384px) {
            .mail-message-content {
                width: 414px !important
            }
        }
    </style>
    <style>* {
            scrollbar-width: thin;
            scrollbar-color: #888 #f6f6f6;
        }

        /* Chrome, Edge, Safari */
        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        ::-webkit-scrollbar-track {
            background: #f6f6f6;
        }

        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 6px;
            border: 2px solid #f6f6f6;
        }

        ::-webkit-scrollbar-thumb:hover {
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        }

        textarea::-webkit-scrollbar-track {
            margin: 15px;
        }</style>
    <base href="#">
</head>
<body class="body" style="width:100%;height:100%;padding:0;Margin:0">
<?php echo $tpl_obj->render('header') ?>
<div dir="ltr" class="es-wrapper-color" lang="und" style="background-color:#FEF9F2"><!--[if gte mso 9]>
    <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
        <v:fill type="tile" color="#fef9f2"></v:fill>
    </v:background>
    <![endif]-->
    <table class="es-wrapper" width="100%" cellspacing="0" cellpadding="0" role="none"
           style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:100%;height:100%;background-repeat:repeat;background-position:center top;background-color:#FEF9F2">
        <tbody>
        <tr>
            <td valign="top" style="padding:0;Margin:0">
                <table cellpadding="0" cellspacing="0" class="es-content" align="center" role="none"
                       style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;width:100%;table-layout:fixed !important">
                    <tbody>
                    <tr>
                        <td align="center" style="padding:0;Margin:0">
                            <table bgcolor="#ffffff" class="es-content-body" align="center" cellpadding="0"
                                   cellspacing="0" role="none"
                                   style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;width:600px">
                                <tbody>
                                <tr>
                                    <td align="left"
                                        style="padding:0;Margin:0;padding-right:20px;padding-left:20px;padding-top:20px">
                                        <table cellpadding="0" cellspacing="0" width="100%" role="none"
                                               style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
                                            <tbody>
                                            <tr>
                                                <td align="center" valign="top" style="padding:0;Margin:0;width:560px">
                                                    <table cellpadding="0" cellspacing="0" width="100%"
                                                           role="presentation"
                                                           style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
                                                        <tbody>
                                                        <tr>
                                                            <td align="center"
                                                                style="padding:0;Margin:0;padding-bottom:10px;padding-top:15px">
                                                                <h2 style="Margin:0;font-family:Marcellus, Arial, serif;mso-line-height-rule:exactly;letter-spacing:0;font-size:34px;font-style:normal;font-weight:normal;line-height:40.8px;color:#436E5A">
                                                                    Products</h2></td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>

                                <?php if($group):?>
                                    <?php foreach ($group as $g):?>
                                        <tr>
                                            <td align="left" style="padding:20px;Margin:0"><!--[if mso]>
                                                <table style="width:560px" cellpadding="0" cellspacing="0">
                                                    <tr>
                                                        <td style="width:270px" valign="top"><![endif]-->
                                                <?php if(isset($g[0])){
                                                    echo $tpl_obj->render('one_item_left',[
                                                        'product' => $g[0]
                                                    ]);
                                                }?>
                                                <!--[if mso]></td>
                                                <td style="width:20px"></td>
                                                <td style="width:270px" valign="top"><![endif]-->
                                                <?php if(isset($g[1])){
                                                    echo $tpl_obj->render('one_item_right',[
                                                        'product' => $g[1]
                                                    ]);
                                                }?>
                                                <!--[if mso]></td></tr></table><![endif]-->
                                            </td>
                                        </tr>
                                    <?php endforeach;?>
                                <?php endif;?>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<?php echo $tpl_obj->render('footer') ?>
</body>
</html>
